<template>
    <view>
        <!-- 自定义固定弹窗 -->
        <view v-if="show" class="pay-popup-overlay" @tap="close">
            <view class="pay-popup-content" @tap.stop="">
                <!-- 弹窗头部 -->
                <view class="pay-popup-header">
                    <view class="pay-popup-title">请选择支付方式</view>
                    <view class="pay-popup-amount">
                        支付金额：<text class="pay-amount-text">￥{{ fen2yuan((subOrder && subOrder.payPrice) || (orderInfo && orderInfo.payPrice) || 0) }}</text>
                    </view>
                    <view class="pay-countdown" v-if="countdown > 0" :class="{ 'countdown-urgent': countdown <= 300 }">
                        <text class="countdown-text">订单将在</text>
                        <text class="countdown-time" :class="{ 'countdown-time-urgent': countdown <= 300 }">{{ formatTime(countdown) }}</text>
                        <text class="countdown-text">后过期</text>
                    </view>
                </view>
                
                <!-- 支付方式选择 -->
                <view class="pay-method-section">
                    <!-- 钱包余额勾选 -->
                    <view class="wallet-checkbox-section">
                        <view 
                            class="wallet-checkbox-item"
                            @tap="toggleUseWallet">
                            <view class="wallet-checkbox">
                                <tui-icon 
                                    v-if="useWallet" 
                                    name="check" 
                                    color="#07C160" 
                                    :size="20">
                                </tui-icon>
                            </view>
                            <view class="wallet-checkbox-info">
                                <text class="wallet-checkbox-title">使用钱包余额</text>
                                <text class="wallet-checkbox-desc">当前余额：￥{{ fen2yuan(balance) }}</text>
                                <view v-if="useWallet" class="wallet-payment-info">
                                    <text class="wallet-payment-text" v-if="balance >= payAmount">
                                        将使用钱包余额支付
                                    </text>
                                    <text class="wallet-payment-warning" v-else>
                                        余额不足（当前￥{{ fen2yuan(balance) }}），无法使用钱包支付
                                    </text>
                                </view>
                            </view>
                        </view>
                    </view>
                    
                    <!-- 微信支付 -->
                    <view 
                        class="pay-method-item" 
                        :class="{ 'pay-method-active': !useWallet || balance < payAmount }"
                        @tap="useWallet = false">
                        <view class="pay-method-logo tui-wechat-icon">
                            <view class="tui-wechat-symbol">
                                <view class="tui-wechat-dot"></view>
                                <view class="tui-wechat-dot"></view>
                                <view class="tui-wechat-dot"></view>
                            </view>
                        </view>
                        <view class="pay-method-info">
                            <text class="pay-method-name">微信支付</text>
                            <text class="pay-method-desc">安全便捷，推荐使用</text>
                        </view>
                        <view class="pay-method-status">
                            <tui-icon 
                                v-if="!useWallet || balance < payAmount" 
                                name="check" 
                                color="#07C160" 
                                :size="20">
                            </tui-icon>
                        </view>
                    </view>
                </view>
                
                <!-- 支付金额明细 -->
                <view v-if="useWallet && balance >= payAmount" class="payment-detail-section">
                    <view class="payment-detail-item">
                        <text class="payment-detail-label">订单金额：</text>
                        <text class="payment-detail-value">￥{{ fen2yuan(payAmount) }}</text>
                    </view>
                    <view class="payment-detail-item">
                        <text class="payment-detail-label">钱包支付：</text>
                        <text class="payment-detail-value wallet-color">-￥{{ fen2yuan(payAmount) }}</text>
                    </view>
                </view>
                
                <!-- 支付按钮 -->
                <view class="pay-button-section">
                    <tui-button 
                        height="88rpx" 
                        type="success" 
                        shape="circle" 
                        shadow 
                        @click="confirmPayment">
                        {{ getPayButtonText() }}
                    </tui-button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'tPayWay',
        emits: ['close', 'confirm', 'cancel'],
        props: {
            show: {
                type: Boolean,
                default: false
            },
            orderInfo: {
                type: Object,
                default: () => ({})
            },
            subOrder: {
                type: Object,
                default: () => ({})
            },
            balance: {
                type: Number,
                default: 0
            }
        },
        mounted() {
            var t = this
            t.$api.req(`/member/social-user/get?type=34`,{
            },'GET',"JSON",false).then(res => {
                if (res.code === 0) {
                    this.openid = res.data.openid
                }

            });
            // console.log(this.subOrder);

        },
        watch: {
            show(newVal) {
                if (newVal) {
                    // 支付弹窗打开时开始倒计时
                    this.startCountdown();
                    // 重置钱包使用状态
                    this.useWallet = false;
                } else {
                    // 支付弹窗关闭时停止倒计时
                    this.stopCountdown();
                }
            }
        },
        beforeDestroy() {
            // 组件销毁前清理定时器
            this.stopCountdown();
        },
        data() {
            return {
                openid: '',
                countdown: 0, // 倒计时秒数
                countdownTimer: null, // 倒计时定时器
                useWallet: false // 是否使用钱包余额
            };
        },
        computed: {
            // 计算支付金额
            payAmount() {
                return (this.subOrder && this.subOrder.payPrice) || (this.orderInfo && this.orderInfo.payPrice) || 0;
            }
        },
        methods: {
            // 分转元函数，参考 yudao-mall
            fen2yuan(price) {
                return (Number(price) / 100).toFixed(2);
            },
            // 格式化倒计时时间
            formatTime(seconds) {
                const minutes = Math.floor(seconds / 60);
                const remainingSeconds = seconds % 60;
                return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
            },
            // 开始倒计时
            startCountdown() {
                // 计算剩余时间
                const remainingTime = this.calculateRemainingTime();
                if (remainingTime <= 0) {
                    this.handleOrderExpired();
                    return;
                }
                
                this.countdown = remainingTime;
                
                this.countdownTimer = setInterval(() => {
                    this.countdown--;
                    if (this.countdown <= 0) {
                        this.stopCountdown();
                        this.handleOrderExpired();
                    }
                }, 1000);
            },
            // 计算剩余时间
            calculateRemainingTime() {
                if (!this.subOrder || !this.subOrder.createTime) {
                    // 如果没有订单创建时间，使用默认15分钟
                    return 15 * 60;
                }
                
                const orderCreateTime = new Date(this.subOrder.createTime).getTime();
                const now = new Date().getTime();
                const elapsed = Math.floor((now - orderCreateTime) / 1000); // 已过秒数
                const totalValidTime = 15 * 60; // 15分钟有效期
                const remaining = totalValidTime - elapsed;
                
                return Math.max(0, remaining);
            },
            // 停止倒计时
            stopCountdown() {
                if (this.countdownTimer) {
                    clearInterval(this.countdownTimer);
                    this.countdownTimer = null;
                }
                this.countdown = 0;
            },
            // 处理订单过期
            handleOrderExpired() {
                uni.showModal({
                    title: '订单已过期',
                    content: '支付订单已过期，请重新下单',
                    showCancel: false,
                    success: () => {
                        this.close();
                    }
                });
            },
            close() {
                this.stopCountdown();
                this.$emit('close');
            },
            // 切换钱包使用状态
            toggleUseWallet() {
                this.useWallet = !this.useWallet;
            },
            // 获取支付按钮文本
            getPayButtonText() {
                if (this.useWallet && this.balance >= this.payAmount) {
                    return '钱包支付';
                }
                return '微信支付';
            },
            confirmPayment() {
                var t = this
                if (!this.subOrder || !this.subOrder.id) {
                    uni.showToast({
                        title: '订单信息错误',
                        icon: 'none'
                    });
                    return;
                }
                
                // 如果勾选了钱包支付
                if (this.useWallet) {
                    // 检查余额是否充足
                    if (this.balance >= this.payAmount) {
                        // 余额充足，使用钱包支付
                        this.handleWalletPayment();
                    } else {
                        // 余额不足，提示用户
                        uni.showModal({
                            title: '余额不足',
                            content: `当前余额￥${this.fen2yuan(this.balance)}不足支付订单金额￥${this.fen2yuan(this.payAmount)}。请先充值或取消勾选钱包余额使用微信支付。`,
                            showCancel: true,
                            confirmText: '去充值',
                            cancelText: '取消',
                            success: (res) => {
                                if (res.confirm) {
                                    // 跳转到充值页面
                                    uni.navigateTo({
                                        url: '/subPackage2/recharge/rechargePage'
                                    });
                                    this.close();
                                } else {
                                    // 用户取消，可以选择取消勾选钱包余额
                                    this.useWallet = false;
                                }
                            }
                        });
                    }
                    return;
                }
                
                // 没有勾选钱包支付，使用微信支付
                this.handleWechatPayment();
            },
            // 处理微信支付
            handleWechatPayment() {
                var t = this
                var orderId = this.subOrder.payOrderId || this.subOrder.id
                
                let data = {
                    id: orderId,
                    channelCode: 'wx_lite',
                    channelExtras: { openid: this.openid },
                };
                
                t.$api.req(`/pay/order/submit`,data,'POST',"JSON",false).then(res1 => {
                    console.log('支付接口响应:', res1);
                    
                    if (res1.code === 0) {
                        const payConfig = JSON.parse(res1.data.displayContent);
                        console.log('微信支付配置:', payConfig);
                        
                        // 微信支付
                        uni.requestPayment({
                            provider: 'wxpay',
                            timeStamp: payConfig.timeStamp,
                            nonceStr: payConfig.nonceStr,
                            package: payConfig.packageValue,
                            signType: payConfig.signType,
                            paySign: payConfig.paySign,
                            success: (res2) => {
                                console.log('微信支付成功:', res2);
                                this.$emit('confirm',{ payMethod: 'wechat' });
                            },
                            fail: (err) => {
                                console.error('微信支付失败:', err);
                                if (err.errMsg === 'requestPayment:fail cancel') {
                                    // 用户取消支付，关闭支付弹窗并跳转到订单详情页面
                                    uni.showToast({
                                        title: '支付已取消',
                                        icon: 'none',
                                        duration: 1500
                                    });
                                    // 延迟跳转，让用户看到提示
                                    setTimeout(() => {
                                        this.close();
                                        // 触发取消支付事件，由父组件处理跳转
                                        this.$emit('cancel', { orderId: this.subOrder.id });
                                    }, 1500);
                                } else {
                                    uni.showToast({
                                        title: '支付失败，请重试',
                                        icon: 'none'
                                    });
                                }
                            },
                        });
                    } else {
                        // 处理支付接口返回的错误
                        if (res1.code === 1007002003) {
                            uni.showModal({
                                title: '订单已过期',
                                content: '支付订单已过期，请重新下单',
                                showCancel: false,
                                success: () => {
                                    this.close();
                                }
                            });
                        } else if (res1.code === 1007001000) {
                            // 支付渠道配置不存在
                            uni.showModal({
                                title: '支付渠道未配置',
                                content: '微信支付渠道未配置，请联系管理员在后台配置支付渠道',
                                showCancel: false,
                                success: () => {
                                    this.close();
                                }
                            });
                        } else {
                            uni.showToast({
                                title: res1.msg || '支付失败，请重试',
                                icon: 'none',
                                duration: 3000
                            });
                        }
                    }
                }).catch((error) => {
                    console.error('获取支付配置失败:', error);
                    uni.showToast({
                        title: '获取支付信息失败，请重试',
                        icon: 'none'
                    });
                });
            },
            // 处理钱包余额支付
            handleWalletPayment() {
                var t = this
                if (!this.subOrder || !this.subOrder.id) {
                    uni.showToast({
                        title: '订单信息错误',
                        icon: 'none'
                    });
                    return;
                }
                
                var orderId = this.subOrder.payOrderId || this.subOrder.id
                
                let data = {
                    id: orderId,
                    channelCode: 'wallet',
                    channelExtras: {},
                };
                
                uni.showLoading({
                    title: '支付中...'
                });
                
                t.$api.req(`/pay/order/submit`, data, 'POST', "JSON", false).then(res1 => {
                    uni.hideLoading();
                    
                    if (res1.code === 0) {
                        // 钱包支付成功，触发确认事件，由父组件处理跳转
                        this.$emit('confirm', { payMethod: 'wallet' });
                    } else {
                        // 处理支付失败
                        this.handlePaymentError(res1);
                    }
                }).catch((error) => {
                    uni.hideLoading();
                    console.error('钱包支付失败:', error);
                    uni.showToast({
                        title: '支付失败，请重试',
                        icon: 'none'
                    });
                });
            },
            // 处理混合支付（钱包 + 微信）
            handleCombinedPayment() {
                var t = this
                if (!this.subOrder || !this.subOrder.id) {
                    uni.showToast({
                        title: '订单信息错误',
                        icon: 'none'
                    });
                    return;
                }
                
                uni.showLoading({
                    title: '支付中...'
                });
                
                // 第一步：使用钱包支付余额部分
                var orderId = this.subOrder.payOrderId || this.subOrder.id
                // 钱包支付金额（余额部分）
                const walletPayAmount = this.walletPayAmount;
                let walletData = {
                    id: orderId,
                    channelCode: 'wallet',
                    payPrice: walletPayAmount,  // 在请求体中直接传递支付金额（余额部分）
                    channelExtras: {},
                };
                
                t.$api.req(`/pay/order/submit`, walletData, 'POST', "JSON", false).then(res1 => {
                    if (res1.code === 0) {
                        // 钱包支付成功，继续微信支付剩余部分
                        console.log('钱包支付成功，继续微信支付');
                        
                        // 重新获取订单信息（因为钱包支付后订单状态可能变化）
                        // 或者直接使用微信支付剩余金额
                        let wechatData = {
                            id: orderId,
                            channelCode: 'wx_lite',
                            channelExtras: { openid: this.openid },
                        };
                        
                        t.$api.req(`/pay/order/submit`, wechatData, 'POST', "JSON", false).then(res2 => {
                            uni.hideLoading();
                            
                            if (res2.code === 0) {
                                const payConfig = JSON.parse(res2.data.displayContent);
                                console.log('微信支付配置:', payConfig);
                                
                                // 微信支付
                                uni.requestPayment({
                                    provider: 'wxpay',
                                    timeStamp: payConfig.timeStamp,
                                    nonceStr: payConfig.nonceStr,
                                    package: payConfig.packageValue,
                                    signType: payConfig.signType,
                                    paySign: payConfig.paySign,
                                    success: (res3) => {
                                        console.log('微信支付成功:', res3);
                                        uni.showToast({
                                            title: '支付成功',
                                            icon: 'success'
                                        });
                                        this.$emit('confirm', { payMethod: 'combined' });
                                    },
                                    fail: (err) => {
                                        console.error('微信支付失败:', err);
                                        if (err.errMsg === 'requestPayment:fail cancel') {
                                            uni.showToast({
                                                title: '支付已取消',
                                                icon: 'none'
                                            });
                                        } else {
                                            uni.showToast({
                                                title: '支付失败，请重试',
                                                icon: 'none'
                                            });
                                        }
                                    },
                                });
                            } else {
                                uni.hideLoading();
                                this.handlePaymentError(res2);
                            }
                        }).catch((error) => {
                            uni.hideLoading();
                            console.error('微信支付失败:', error);
                            uni.showToast({
                                title: '支付失败，请重试',
                                icon: 'none'
                            });
                        });
                    } else {
                        uni.hideLoading();
                        this.handlePaymentError(res1);
                    }
                }).catch((error) => {
                    uni.hideLoading();
                    console.error('钱包支付失败:', error);
                    uni.showToast({
                        title: '支付失败，请重试',
                        icon: 'none'
                    });
                });
            },
            // 处理支付错误
            handlePaymentError(res) {
                if (res.code === 1007002003) {
                    uni.showModal({
                        title: '订单已过期',
                        content: '支付订单已过期，请重新下单',
                        showCancel: false,
                        success: () => {
                            this.close();
                        }
                    });
                } else if (res.code === 1007001000) {
                    uni.showModal({
                        title: '支付渠道未配置',
                        content: '支付渠道未配置，请联系管理员在后台配置支付渠道',
                        showCancel: false,
                        success: () => {
                            this.close();
                        }
                    });
                } else if (res.code === 1007001001) {
                    uni.showModal({
                        title: '支付渠道已禁用',
                        content: '钱包支付渠道已禁用，请在后台管理系统中启用该支付渠道',
                        showCancel: false,
                        success: () => {
                            this.close();
                        }
                    });
                } else if (res.code === 1007002004 || (res.msg && res.msg.indexOf('钱包余额不足') >= 0)) {
                    // 钱包余额不足的错误（混合支付时）
                    uni.showModal({
                        title: '余额不足',
                        content: '钱包余额不足，无法完成混合支付。系统不支持部分支付，请先充值或使用其他支付方式。',
                        showCancel: true,
                        confirmText: '去充值',
                        success: (modalRes) => {
                            if (modalRes.confirm) {
                                // 跳转到充值页面
                                uni.navigateTo({
                                    url: '/subPackage2/recharge/rechargePage'
                                });
                            }
                            this.close();
                        }
                    });
                } else {
                    uni.showToast({
                        title: res.msg || '支付失败，请重试',
                        icon: 'none',
                        duration: 3000
                    });
                }
            }
        }
    }
</script>
<style scoped>
    /* 自定义固定弹窗样式 */
    .pay-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        animation: fadeIn 0.3s ease-out;
    }
    
    .pay-popup-content {
        width: 100%;
        max-width: 750rpx;
        background: #fff;
        border-radius: 24rpx 24rpx 0 0;
        transform: translateY(0);
        animation: slideUp 0.3s ease-out;
        box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.1);
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes slideUp {
        from { 
            transform: translateY(100%); 
        }
        to { 
            transform: translateY(0); 
        }
    }
    
    /* 弹窗头部 */
    .pay-popup-header {
        padding: 40rpx 30rpx 20rpx;
        text-align: center;
        border-bottom: 1rpx solid #f0f0f0;
    }
    
    .pay-popup-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 16rpx;
    }
    
    .pay-popup-amount {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
    }
    
    .pay-amount-text {
        color: #ff4444;
        font-weight: 600;
        font-size: 36rpx;
    }
    
    /* 倒计时样式 */
    .pay-countdown {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20rpx;
        padding: 16rpx 24rpx;
        background: linear-gradient(135deg, #fff5f5, #ffe6e6);
        border-radius: 12rpx;
        border: 1rpx solid #ffebee;
    }
    
    .countdown-text {
        font-size: 24rpx;
        color: #666;
    }
    
    .countdown-time {
        font-size: 28rpx;
        font-weight: 600;
        color: #ff4444;
        margin: 0 8rpx;
        padding: 4rpx 12rpx;
        background: #fff;
        border-radius: 6rpx;
        border: 1rpx solid #ffcdd2;
        min-width: 80rpx;
        text-align: center;
        font-family: 'Courier New', monospace;
        transition: all 0.3s ease;
    }
    
    .countdown-urgent {
        background: linear-gradient(135deg, #ffebee, #ffcdd2) !important;
        border-color: #f44336 !important;
        animation: countdown-pulse 1s ease-in-out infinite;
    }
    
    .countdown-time-urgent {
        color: #d32f2f !important;
        background: #fff !important;
        border-color: #f44336 !important;
        font-weight: 700;
        animation: countdown-blink 0.5s ease-in-out infinite;
    }
    
    @keyframes countdown-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.02); }
    }
    
    @keyframes countdown-blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0.7; }
    }
    
    /* 支付方式选择 */
    .pay-method-section {
        padding: 20rpx 30rpx;
    }
    
    /* 钱包余额勾选区域 */
    .wallet-checkbox-section {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        margin-bottom: 20rpx;
    }
    
    .wallet-checkbox-item {
        display: flex;
        align-items: flex-start;
        padding: 20rpx;
        background: #f8f9fa;
        border-radius: 16rpx;
    }
    
    .wallet-checkbox {
        width: 40rpx;
        height: 40rpx;
        border: 2rpx solid #ddd;
        border-radius: 8rpx;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        margin-top: 4rpx;
        flex-shrink: 0;
    }
    
    .wallet-checkbox-info {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .wallet-checkbox-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
    }
    
    .wallet-checkbox-desc {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 8rpx;
    }
    
    .wallet-payment-info {
        margin-top: 8rpx;
    }
    
    .wallet-payment-text {
        font-size: 24rpx;
        color: #07C160;
    }
    
    .wallet-payment-warning {
        color: #ff4444;
        font-weight: 500;
    }
    
    /* 支付明细 */
    .payment-detail-section {
        padding: 20rpx 30rpx;
        background: #f8f9fa;
        border-top: 1rpx solid #f0f0f0;
        border-bottom: 1rpx solid #f0f0f0;
    }
    
    .payment-detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12rpx 0;
        font-size: 28rpx;
    }
    
    .payment-detail-label {
        color: #666;
    }
    
    .payment-detail-value {
        font-weight: 600;
        color: #333;
    }
    
    .wallet-color {
        color: #07C160;
    }
    
    .wechat-color {
        color: #07C160;
    }
    
    .pay-method-item {
        display: flex;
        align-items: center;
        padding: 24rpx 20rpx;
        background: #f8f9fa;
        border-radius: 16rpx;
        border: 2rpx solid #07C160;
        transition: all 0.3s ease;
    }
    
    .pay-method-item:active {
        background: #e8f5e8;
        transform: scale(0.98);
    }
    
    .pay-method-active {
        border-color: #07C160 !important;
        background: #f0f9ff !important;
    }
    
    .pay-method-disabled {
        opacity: 0.6;
        background: #f5f5f5 !important;
    }
    
    .pay-method-radio {
        width: 40rpx;
        height: 40rpx;
        border: 2rpx solid #ddd;
        border-radius: 50%;
        background: #fff;
    }
    
    .pay-method-logo {
        width: 56rpx;
        height: 56rpx;
        margin-right: 20rpx;
        border-radius: 8rpx;
    }
    
    .tui-wechat-icon {
        background: linear-gradient(135deg, #07C160, #00D976);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12rpx;
        box-shadow: 0 2rpx 8rpx rgba(7, 193, 96, 0.3);
    }
    
    .tui-wallet-icon {
        background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12rpx;
        box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
    }
    
    .wallet-icon-text {
        font-size: 32rpx;
    }
    
    .tui-wechat-symbol {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4rpx;
    }
    
    .tui-wechat-dot {
        width: 8rpx;
        height: 8rpx;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
    }
    
    .tui-wechat-dot:nth-child(1) {
        animation: wechat-pulse 1.5s ease-in-out infinite;
    }
    
    .tui-wechat-dot:nth-child(2) {
        animation: wechat-pulse 1.5s ease-in-out infinite 0.2s;
    }
    
    .tui-wechat-dot:nth-child(3) {
        animation: wechat-pulse 1.5s ease-in-out infinite 0.4s;
    }
    
    @keyframes wechat-pulse {
        0%, 60%, 100% {
            opacity: 1;
            transform: scale(1);
        }
        30% {
            opacity: 0.6;
            transform: scale(0.8);
        }
    }
    
    .pay-method-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .pay-method-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 4rpx;
    }
    
    .pay-method-desc {
        font-size: 24rpx;
        color: #666;
    }
    
    .pay-method-warning {
        font-size: 22rpx;
        color: #ff4444;
        margin-top: 4rpx;
    }
    
    .pay-method-status {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rpx;
        height: 40rpx;
        background: #f0f9ff;
        border-radius: 50%;
        border: 2rpx solid #07C160;
    }
    
    /* 支付按钮 */
    .pay-button-section {
        padding: 30rpx;
        background: #fff;
        border-top: 1rpx solid #f0f0f0;
    }
</style>